<template>
	<view class="content">
		<view class="headertop" :style="{'background':flag1?'#000':''}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 2@2x.png" class="pagelefticon"
					mode=""></image>
			</view>
		</view>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(7).png" mode="" class="pageimg">
		</image>
		<view class="bottoncontent">
			<view class="center">
				<view class="seacherbox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(11).png" class="sechicon"
						mode=""></image>
					<input type="text" placeholder="请输入关键词" v-model="query.keywords" placeholder-class="title_input"
						class="custom-input" />
					<image src="/static/微信图片_20250521183655.png" class="closeicon" @click="closeinput"
						v-if="query.keywords" mode=""></image>
					<view class="seachbtn" @click="initlist('搜索')">
						搜索
					</view>
				</view>

				<view class="classify">
					<view class="itembox" @click="qiehuan(-1)">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" :style="{'opacity':active==-1?'0.5':'1'}">
						</image>
						<image src="/static/image@2x.png" :class="active==-1?'itemboxback mohu':'itemboxback'"
							mode="aspectFill">
						</image>
						<view class="title">
							全部
						</view>
					</view>
					<view class="itembox" @click="qiehuan(index)" v-for="(item,index) in classList" :key="item.id">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" :style="{'opacity':active==index?'0.5':'1'}">
						</image>
						<image :src="item.image" :class="active==index?'itemboxback mohu':'itemboxback'"
							mode="aspectFill">
						</image>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</view>


				<view class="itemboxss">
					<view class="msgicon" v-if="!list.length">
						<image src="/static/微信图片_20250514232056.png" mode="widthFix"></image>
						<view class="msgtext">
							暂无商品
						</view>
					</view>
					<view class="itembox" v-for="(item,index) in list" :key="index" @click="gopage('详情',item.id)">
						<view class="centerbox">
							<view class="toopbiox">
								<image :src="item.image" class="leftbox" mode="">
								</image>
								<view class="infobox">
									<view class="t2">
										{{item.title}}
									</view>
									<view class="fbt">
										{{item.detail}}
									</view>

									<view class="jiage">
										￥{{item.price}}
									</view>
								</view>
							</view>
							<view class="bnttom">
								<view class="left1" @click.stop="item.bool=!item.bool">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x.png"
										v-if="!item.bool" mode=""></image>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11457@2x.png"
										v-if="item.bool" mode=""></image>
									<span>可租赁</span>
								</view>
								<view class="ljyuyue" @click.stop="gopage('租赁详情',item.id)">
									立即租
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="height: 300rpx;">

		</view>
		<view class="bottomfixed">
			<view class="linebox">
				<view class="leftty" @click="allquanx">
					<image v-if="flag===false"
						src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x.png" mode=""></image>

					<image src="/static/duihao.png" v-else mode="">
					</image>
					<span>已选{{yx}}个商品</span>
				</view>
				<view class="rightbtn" @click="yuyue">
					立即租赁
				</view>
			</view>
			<Tabbar :page="page"></Tabbar>
		</view>
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import Tabbar from '@/components/tabbar.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		onShow,
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	import {
		classlist,
		leaselist
	} from '@/api/lease.js'
	const flag1 = ref(false)
	const page = ref('')
	const denglu = ref(null)
	const lastpage = ref(0)
	const flag = ref(false)
	const classList = ref([])
	const list = ref([])
	const query = reactive({
		page: 1,
		limit: 10,
		keywords: '',
		cid: ''
	})
	const active = ref(-1)
	const statusBarHeight = ref(0)
	const barHeight = ref('')
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			flag1.value = true
		} else {
			flag1.value = false
		}
		if (query.page < lastpage.value) {
			query.page++
			initlist()
		}
	})
	const yx = computed(() => {
		var dui = list.value.filter(item => item.bool == true)
		return dui.length
	})

	function closeinput() {
		query.keywords = ''
		initlist('搜索')
	}
	onShow(() => {
		flag.value = false
		page.value = '/pages/lease/index'
		list.value = []
		query.page = 1
		active.value = -1
		classlistinit()
	})
	onLoad(() => {})
	onMounted(() => {
		console.log('我创建了', uni.getSystemInfoSync().statusBarHeight, wx.getMenuButtonBoundingClientRect());
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})

	function allquanx() {
		flag.value = !flag.value
		for (var i in list.value) {
			list.value[i]['bool'] = flag.value
		}
	}

	async function yuyue() {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}

		var dui = list.value.filter(item => item.bool == true)
		if (!dui.length) {
			uni.showToast({
				title: '请选择可租赁的商品',
				icon: 'none'
			})
			return
		}
		uni.setStorageSync('zuliarr', dui)
		uni.navigateTo({
			url: '/sub_lease/lease/leaseinfo?typestr=duoxuan'
		})
	}

	// 类型列表
	async function classlistinit() {
		const res = await classlist()
		if (res.data.code == 1) {
			classList.value = res.data.data
			initlist()
		}
	}

	function qiehuan(index) {
		if (index != -1) {
			query.keywords = ''
		}
		active.value = index
		list.value = []
		query.page = 1
		initlist()
	}
	async function initlist(str) {
		if (str == '搜索') {

			list.value = []
			query.page = 1
			active.value = -1
		}
		if (active.value == -1) {
			query.cid = ''
		} else {
			query.cid = classList.value[active.value]['id']
		}
		const res = await leaselist(query)
		if (res.data.code == 1) {
			lastpage.value = res.data.data.lastpage
			list.value.push(...res.data.data.list)
			for (var i in list.value) {
				list.value[i]['bool'] = false
			}
		}
	}

	function gopage(str, id) {
		if (str == '租赁详情') {
			if (!uni.getStorageSync('token')) {
				denglu.value.DengLu()
				return
			}
			uni.navigateTo({
				url: '/sub_lease/lease/leaseinfo?id=' + id
			})
		} else if (str == '详情') {
			uni.navigateTo({
				url: '/sub_lease/lease/detail?id=' + id
			})
		}
	}
</script>

<style lang="scss">
	.closeicon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 80rpx;
	}

	.msgicon {
		width: 532rpx;
		margin: 30rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 532rpx;
		}
	}

	@import '/styles/lease.scss';
</style>